<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" href="../../css/animate.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css/mescroll.css">
  <link rel="stylesheet" href="../../css/gloab.css">
  <title>设置自动更新</title>
  <style media="screen">
    body{
      background: #dedede;
    }
    input {
    display: inline-block;
    vertical-align: middle;
    /* 当成为行内块元素时它就可以垂直居中了 */
    width: 15px;
    height: 15px;
    -webkit-appearance: none;
    /* 清除原有的样式 */
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    /* 去掉点击后外面可能会出现的蓝框 */
    line-height: 15px;
    color: #d8d8d8;
    }
    input:after {
    /* //在input的内容之后插入新内容 */
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 8px;
    font-size: 10px;
    color: #fff;
    border: 4px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
    /* 规定两个并排的带边框的框 */
    }
    input:checked:after {
    /* 选中之后的样子 */
    content: "L";
    transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
    括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
    -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    border-color: #3f80cc;
    background-color: #3f80cc;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="public-header">
      <div id="statusbar"></div>
      <header class="public-header">
        <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
        <div class="public-header-title">设置自动更新</div>
      </header>
    </div>
    <div class="wystt">
      <div class="wystt-choose-text-title" style="text-align:center;margin-top:0.5rem;border:none;">请选择自动刷新频率</div>
      <div class="wystt-choose-text" style="background-color:#f4f4f4;margin-top:0;">
        <div class="wystt-choose-text-list flex wrap">
          <div class="wystt-choose-text-son1" style="width:20%;margin:0.2rem 0;" v-for="(item,index) in gdtts" :style="index%3==0?'':'margin-left:20%;'" @click="fixed(index)">
            <input type="radio" name="frequency" :value="index" v-model="frequency">
            <span>{{item}}</span>
          </div>
        </div>
      </div>
      <!-- <div class="wystt-choose-text-title" style="text-align:center;margin-top:0.5rem;border:none;">请选择购买时长</div>
      <div class="wystt-choose-text" style="background-color:#f4f4f4;margin-top:0;">
        <div class="wystt-choose-text-list flex wrap">
          <div class="wystt-choose-text-son1" style="width:20%;margin:0.2rem 0;" v-for="(item,index) in gdtt" :style="index%3==0?'':'margin-left:20%;'" @click="fixeds(index)">
            <input type="radio" name="time" :value="index" v-model="time">
            <span>{{item}}</span>
          </div>
        </div>
      </div> -->
      <p style="font-size:0.3rem;text-align:center;margin-top:0.86rem;font-weight:bold;">每次执行需支付<font style="color:#f00;">{{price}}积分</font></p>
      <p style="font-size:0.26rem;text-align:center;color:#000;margin-top:0.1rem;">当前积分余额为：<font style="color:#f00;">{{integral.score}}积分</font></p>
      <div class="wystt-pay-btn" @click="pay">提交执行</div>
    </div>
  </div>
  <div class="public-progress" style="z-index:9;">
   <img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/mescroll.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/fastclick.js"></script>

<script>
var vm;
var mescroll;
var mySwiper;
apiready=function(){
  api.removeLaunchView();
  setBar("statusbar");
  setFont(750);
  startVue();
  $(".public-progress").fadeOut(1000);
  setTimeout(function(){
    $(".public-progress").css({"display":"none"});
  },1000);
}
function startVue(){
  vm = new Vue({
    el:"#app",
    data:{
      gdtt:["1小时","2小时","6小时","12小时","1天","2天"],
      gdtts:["10分钟","30分钟","1小时","2小时"],
      num1:0,
      refresh:'',
      frequency:0,
      time:0,
      price:'',
      p:'',
      integral:0,
    },
    created:function(){
      this.getRefreshValue();
      this.getIntegral();
    },
    methods:{
      //获取当前用户积分
      getIntegral:function(){
        api.ajax({
            url: apiUrl+'/api/user/index',
            method: 'post',
            data: {
                values: {
                  token:$api.getStorage('token'),
                },
            }
        },function(ret, err){
			console.log(JSON.stringify(ret))
            if (ret.code==1) {
              vm.integral = ret.data;
            } else {
              vm.integral = 0;
            }
        });

      },
      fixeds:function(index){
        vm.time = index;
        vm.getPrice(index);
      },
      fixed:function(index){
        vm.frequency = index;
        vm.getPrice(index);
      },
      //立即支付
      pay:function(){
        if(api.pageParam.id==""){
          api.toast({
              msg: '参数错误',
              duration: 2000,
              location: 'middle'
          });
          return;
        }
        api.ajax({
            url: apiUrl+'/api/user/autoRefresh',
            method: 'post',
            data: {
                values: {
                  aid:api.pageParam.id,
                  frequency:vm.p,
                  token:$api.getStorage('token'),
                },
            }
        },function(ret, err){
          if (ret.code==1) {
            msg(ret.msg);
            setTimeout(function(){
              api.execScript({
                  name: 'root',
                  frameName: 'home',
                  script:'vm.daohang(index=0);'
              });
              api.closeToWin({
                  name: 'root'
              });
              api.execScript({
                  name: 'root',
                  script:'qhSelect(0);'
              });
            },500);
          }else{
            api.toast({
                msg: ret.msg,
                duration: 2000,
                location: 'middle'
            });
            setTimeout(function(){
              location.reload();
			  api.openWin({
			      name: 'buy_jifen',
			      reload:true,
			      url: './buy_jifen.html',
			  });
            },500);
          }
        });

      },
      //获取支付积分
      getPrice:function(){
        vm.p = "";//刷新频率
        // vm.t = "";//刷新时长
        switch(vm.frequency) {
             case 0:
                vm.p = 10;
                break;
             case 1:
                vm.p = 30;
                break;
             case 2:
                vm.p = 60;
                break;
             case 3:
                vm.p = 120;
                break;
             default:
        }
        // switch(vm.time) {
        //      case 0:
        //         vm.t = 60;
        //         break;
        //      case 1:
        //         vm.t = 120
        //         break;
        //      case 2:
        //         vm.t = 360;
        //         break;
        //      case 3:
        //         vm.t = 720;
        //         break;
        //      case 4:
        //         vm.t = 1440;
        //         break;
        //      case 5:
        //         vm.t = 2880;
        //         break;
        //      default:
        // }
        // if(vm.p>vm.t){
        //   msg('刷新频率不得大于购买时长');
        //   return;
        // }
        vm.price = vm.refresh;
      },
      //获取刷新费用（每次刷新所需费用）
       getRefreshValue:function(){
         api.ajax({
             url: apiUrl+'/api/index/getRefreshPrice',
             method: 'post',
             data: {
                 values: {
                 },
             }
         },function(ret, err){
             if (ret.code==1) {
                vm.refresh = ret.data;
                vm.getPrice();
             }
         });

       },
    }
  })
}
</script>
</html>
